
<template>
    <div>
        <div>

            <!--                                >立即观看</button>-->
            <button class="buy_btn" id="buyBtn" @click="buyCourse">立即购买</button>
        </div>

        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="img"
                    label="商品图片"
                    width="120">
                <template slot-scope="scope">
                    <img :src="scope.row.img" width="50" height="30">
                </template>
            </el-table-column>
            <el-table-column
                    prop="gname"
                    label="商品名称"
            >
            </el-table-column>
            <el-table-column
                    prop="gbname"
                    label="商品名牌"
            >
            </el-table-column>
            <el-table-column
                    prop="gsname"
                    label="计数方式"
            >
            </el-table-column>
            <el-table-column
                    prop="gscounts"
                    label="购买数量"
            >
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="店铺名称"
                    >
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址"
                    show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    label="操作"
                    show-overflow-tooltip>
                <template slot-scope="scope" >
                    <el-button type="primary"  size="small" @click="del(scope.row.id)">移除购物车</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination>
        <el-dialog title="收银台" :visible.sync="dialogFormVisible" width="750px">
            <div data-v-1ee14d65="" class="modal_body" style="width: 100%">
                <table data-v-1ee14d65="" class="table">
                    <tr data-v-1ee14d65="">
                        <th data-v-1ee14d65="">商品图片</th>
                        <th data-v-1ee14d65="">商品名称</th>
                        <th data-v-1ee14d65="">商品价格</th>
                        <th data-v-1ee14d65="">商品数量</th>
                        <th data-v-1ee14d65="">商品总价</th>
                    </tr>
                    <tr data-v-1ee14d65="" v-for="(item,index) in multipleSelection">
                        <td data-v-1ee14d65="">
                            <div data-v-1ee14d65="" style="width: 150px;">
                                <div data-v-1ee14d65="" class="img" style="width: 120px">
                                    <div>

                                        <img data-v-1ee14d65="" :src="item.img" alt=""
                                             style="width: 120px;height: 60px">
                                    </div>
                                </div>

                            </div>
                        </td>
                        <td>
                            <div data-v-1ee14d65=""
                                 style="width: 120px;height: 60px">
                                {{item.gname}}
                            </div>
                        </td>
                        <td data-v-1ee14d65="" class="c_orange">{{item.sellingprice}}¥</td>
                        <td data-v-1ee14d65="" >
                            <template>
                                <el-input-number v-model="item.gscounts" @change="handleChange" :min="1" :max=item.count label="描述文字" style="width: 120px"></el-input-number>
                            </template>
                            {{item.gsname}}
                        </td>
                        <td data-v-1ee14d65="" >
                            <div class="cartList" id="zong1">
                                ¥{{item.sellingprice*item.gscounts}}
                            </div>
                        </td>
                    </tr>

                </table>
                <div>总价 ： {{zongjia}} </div>
                <div class="pay_type" style="border-color: #ec7f00;margin-top: 20px">

                    <input type="radio" id="payType2" name="payType" value="1" v-model="payType"
                           style="margin-left: -370px">
                    <label for="payType2" border="true" class="pay pay_ali"
                           @click="changePay(1)"></label>
                    <input type="radio" id="payType1" name="payType" value="2" v-model="payType"
                           style="margin-left: 170px">
                    <label for="payType1" class="pay pay_weixin" @click="changePay(2)"></label>
                </div>
            </div>
            <div data-v-1ee14d65="" class="modal_foot">
                <button data-v-1ee14d65="" class="solid_btn" @click="submit"
                        style="margin-left: 160px">立即支付
                </button>
            </div>
        </el-dialog>

        <!--                            微信支付-->
        <el-dialog
                title="收银台"
                :visible.sync="dialogVisible"
                width="30%"
        >
            <div style="text-align: center">
                <p>微信支付 {{payResult.price}}元</p>
                <div style="border: 1px solid #f3f3f3;width: 220px;padding: 10px;margin: 0px auto">
                    <vue-qr
                            :text="payResult.codeUrl"
                            :margin="0"
                            colorDark="green"
                            :logoSrc="require('/src/assets/img/wx.jpg')"
                            colorLight="#fff"
                            :size="200">

                    </vue-qr>
                </div>
            </div>
            <div style="font-size: 13px">
                提示:<br>
                支付成功前请勿手动关闭页面<br>
                二维码两小时内有效,请及时扫码支付<br>
            </div>
        </el-dialog>
    </div>

</template>



<script>
    import vueQr from "vue-qr";
    export default {
        name: "MyShouCang",
        data() {
            return {
                tableData:[],
                multipleSelection:[],
                //当前页数
                currentPage:1,
                pageSizes:[5,10,15,20],
                //每页显示的条数
                pageSize:5,
                //总条数
                total:0,
                dialogFormVisible:false,
                classData:[],
                num:1,
                aaaa:[],

                //订单号
                soid:"",

                orderNo:"",
                payResult: {
                    //价格
                    price:0,
                    //二维码路径  借助vue-qr 可以把二维码地址转为二维码图片
                    codeUrl:"",

                    orderNo:"",
                    logoSrc: "/src/assets/img/wx.jpg" //微信二维码中间小logo
                },
                timer1: '',

                payType: '',
                dialogVisible: false, //弹出框
                HuiYuanId: window.sessionStorage.getItem("memberId"),

            }
        },
        created() {

            this.initTable()

        },
        components: {
            vueQr
        },
        computed:{
            //总价
            zongjia(){
                //在这里定义一个total为0，来存放他的总价
                let zongjia = 0 ;
                //循环books
                for (let i = 0 ; i < this.multipleSelection.length ; i++ ){
                    //相当于 total = books每一个数量 * books每一个的价钱
                    zongjia += this.multipleSelection[i].gscounts * this.multipleSelection[i].sellingprice
                }
                return zongjia
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
                console.log(this.multipleSelection)
            },
            //每页显示的条数发生改变时触发
            handleSizeChange(val) {
                this.pageSize=val;
                this.initTable();
            },
            //当前页码发生改变时触发
            handleCurrentChange(val) {
                this.currentPage=val;
                this.initTable();
            },
            initTable(){
                var that = this;
                this.$http.post("/order/shopcar/selecByIdShopCar/"+this.currentPage+"/"+this.pageSize).then(function (resp) {
                    console.log(resp)
                    that.tableData=resp.data.data.records
                    that.total=resp.data.data.total;

                })
            },

            buyCourse() {
                if (!this.HuiYuanId) {
                    this.$msgBox({
                        content: '请登录后再购买',
                        isShowCancelBtn: false
                    }).then(() => {
                        this.$router.push({
                            path: '/qianLogin'
                        }); //登录
                    })
                    return
                }
                this.dialogFormVisible = true;

            },
            //计数器
            handleChange(value) {
                console.log(value);
            },
            goLogin() {
                // this.$store.dispatch('REDIRECT_LOGIN');
                this.$router.push({
                    path: '/qianLogin'
                }); //登录
            },
            stopVideo() {
            },
            //请先登录

            getOrder() {

            },
            resetPay() {
                this.payStep = 1;
                this.getOrder(this.payType);
            },
            changePay(int) {
                this.getOrder(int);
            },
            submit(){
                /*this.aaaa.goodsname=this.multipleSelection.gname;
                this.aaaa.img=this.multipleSelection.img;
                this.aaaa.typename=this.multipleSelection.typename;
                this.aaaa.gsname=this.multipleSelection.gsname;
                this.aaaa.gbname=this.multipleSelection.gbname;
                this.aaaa.gdname=this.multipleSelection.gdname;
                this.aaaa.dprice=this.multipleSelection.sellingprice;
                this.aaaa.zprice=this.multipleSelection.sellingprice*this.multipleSelection.gscounts;
                this.aaaa.tbQuantity=this.multipleSelection.gscounts;
                this.aaaa.sname=this.multipleSelection.name;
                this.aaaa.id=this.multipleSelection.id;
                this.aaaa.orderPay=this.zongjia;
                this.aaaa.shopId=this.multipleSelection.gsid;*/
                this.aaaa.orderPay=this.zongjia;
                this.$http.post("/order/order/OrderGeneration1/"+this.zongjia, this.multipleSelection).then(result=>{
                    this.soid=result.data.data;
                    this.orderNo=result.data.data;
                    console.log(this.orderNo)
                    if (this.payType === '1') {
                        this.$http.get("/order/alipay/pay?subject="+ null +"&traceNo="+ this.soid +"&totalAmount="+this.zongjia).then(function (resp) {
                            var that = this;
                            // 添加之前先删除一下，如果单页面，页面不刷新，添加进去的内容会一直保留在页面中，二次调用form表单会出错
                            const divForm = document.getElementsByTagName("div");
                            if (divForm.length) {
                                document.body.removeChild(divForm[0]);
                            }
                            const div = document.createElement("div");
                            div.innerHTML = resp.data; // data就是接口返回的form 表单字符串
                            document.body.appendChild(div);
                            document.forms[0].setAttribute("target", "_blank"); // 新开窗口跳转
                            document.forms[0].submit();
                            this.$router.go(0);
                        })



                    } else if (this.payType === '2') {
                        //设置一个定时任务，每隔3秒调用一次
                        var that = this;
                        this.$http.post("/order/order/createNavite/"+this.orderNo).then(function (resp) {
                            console.log(resp)
                            that.dialogVisible = true
                            if (resp.data.code === 2000) {

                                that.payResult = resp.data.data;
                            } else {
                                that.$message.error("订单已经生成,尚未支付");
                            }
                        })
                        //设置一个定时任务，每隔3秒调用一次
                        this.timer1 = setInterval(() => {
                            this.queryPayStatus(this.payResult.orderNo)
                        }, 4000);
                    }

                    this.dialogVisible=false;

                })
            },
            queryPayStatus() {
                var that = this;
                this.$http.post("order/order/queryPayStatus/"+this.orderNo).then(r => {
                    if (r.data.code === 2000) {
                        //如果支付成功，清除定时器
                        clearInterval(that.timer1)
                        that.timer1 = null;
                        that.$message({
                            type: 'success',
                            message: '支付成功!'
                        })
                        that.dialogVisible = false;
                        //刷新界面
                        this.$router.go(0);
                        //跳转到课程详情页面观看视频
                        // that.$router.push({path: '/DetailId/:id' + that.payResult.course_id})
                    }
                })
            },
            del(id){
                this.$http.post("/order/shopcar/deleteById/"+id).then(result=>{
                    if (result.data.code===2000){
                        this.initTable();
                    }
                })
            }

        }
    }

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    .pay {
        width: 200px;
        height: 50px;
        border: 1px solid #fff;
        float: left;
        background-repeat: no-repeat;
        background-position: center center;

        &.pay_ali {
            background-image: url();
            margin-left: 20px;


        }

        &.pay_weixin {
            background-image: url();
            margin-left: 0px;

        }
    }

    .modal_body {
        height: 310px;
        overflow: auto;
        font-size: 91%;
        width: 460px;
    }
    .person_info[data-v-049ea09a] {
        min-height: 400px;
        padding-bottom: 30px;
    }

    .course_content[data-v-049ea09a] {
        height: 86px;
        padding: 25px 0;
        margin: 0 25px;
        border-bottom: 2px solid #f2f2f2;
        position: relative;
    }

    .cl:before, .clearfix:before, .container:before {
        content: "";
        display: table;
    }

    .course_content .img_box[data-v-049ea09a] {
        display: inline-block;
        width: 175px;
        height: 86px;
    }

    .fl {
        float: left;
    }

    .course_content img[data-v-049ea09a] {
        width: 175px;
        height: 86px;
    }

    img {
        max-width: 100%;
        border: none;
    }

    .course_content p.course_name[data-v-049ea09a] {
        margin-left: 20px;
        width: 640px;
        color: #333;
    }

    .course_content a[data-v-049ea09a] {
        display: block;
        width: 106px;
        height: 36px;
        line-height: 36px;
        text-align: center;
        border-radius: 6px;
        font-size: 14px;
        border: 1px solid #999;
        color: #999;
        background: #fff;
        position: absolute;
        top: 25px;
        right: 0;
        cursor: pointer;
    }

    a {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
        text-decoration: none;
    }

    .course_content a.close_collect[data-v-049ea09a] {
        top: 80px;
        border: none;
    }

    .course_content p.course_name[data-v-049ea09a] {
        margin-left: 20px;
        width: 640px;
        color: #333;
    }

    .course_content p[data-v-049ea09a] {
        font-size: 14px;
        color: #999;
    }

    .person_content[data-v-049ea09a] {
        width: 1012px;
        float: right;
        background: #fff;
        border-radius: 6px;
    }
    .notdata{
        text-align: center;
        padding: 60px 0;
        font-size: 30px;
        color: #999;
        min-height: 300px;
        i{
            font-size: 30px;
            padding-right: 12px;
        }
    }
    .person_title[data-v-049ea09a] {
        border-bottom: 1px solid #f2f2f2;
        position: relative;
    }

    .cl:before, .clearfix:before, .container:before {
        content: "";
        display: table;
    }

    .person_title li.now[data-v-049ea09a] {
        border-bottom: 2px solid #d51423;
    }

    .person_title li.now a[data-v-049ea09a], .person_title li a[data-v-049ea09a]:hover {
        color: #d51423;
    }

    .person_title li[data-v-049ea09a] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }

    a {
        color: #333;
    }

    .person_title li[data-v-049ea09a] {
        float: left;
        line-height: 60px;
        padding: 0 30px;
        font-size: 14px;
    }

    a {
        color: #333;
    }
</style>